<template>
  <div class="Nav">
    <div class="demo-type" :class="this.$store.state.flag ? 'demo-typeuserDis1' : 'demo-typeuserDis'">
      <el-avatar @mouseenter.native = "startRotate()" @mouseleave.native = "endRotate()" :size="40" :src="headImage" @error="errorHandler()" :class="addRotate ? 'go' : ''" class="ico">
        <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
      </el-avatar>
      <div class="demo-typeuser">
        <p>啊哈</p>
        <p>&nbsp;</p>
      </div>
    </div>
    <el-menu class="el-menu-vertical-demo"
    :default-active="this.$store.state.index"
    unique-opened router
    :collapse='this.$store.state.flag'>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-claim"></i>
          <span slot="title">食堂管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/">用户管理</el-menu-item>
        </el-menu-item-group>
		<el-menu-item-group>
		  <el-menu-item index="/settings">时间配置</el-menu-item>
		</el-menu-item-group>
      </el-submenu>
	  <el-submenu index="2">
	    <template slot="title">
	      <i class="el-icon-user-solid"></i>
	      <span slot="title">账户管理</span>
	    </template>
	    <el-menu-item-group>
	      <el-menu-item index="/manage">账户管理</el-menu-item>
	    </el-menu-item-group>
	  </el-submenu>
    </el-menu>



  </div>
</template>

<script>
  export default{
    name: "Nav",
    data() {
      return {
        openeds: ['1'],
        name: '',
        // roel: '超级英雄',
        treeList:[],
        addRotate: false,
        headImage: '',  // 头像
        imgFlag: true
      };
    },
    created() {

    },
    mounted() {
      // 获取当前路由的路径，用来修改当前激活的导航栏
      this.openHan(this.$route.path);
      // 获取当前登录用户信息
      
    },
    methods: {
      // 当前激活的导航栏
      openHan(index) {
        this.$store.commit('activeIndex', index)
      },
      // 图片加载失败
      errorHandler() {
        return true
      },
      // 旋转开始
      startRotate() {
        this.addRotate = true
      },
      // 旋转结束
      endRotate() {
        this.addRotate = false
      },
    },

  }
</script>

<style scoped>
 @import url("../css/nav.css");

 .demo-type {
   padding: 1.25rem;
   box-sizing: border-box;
 }
 .demo-type .ico {
   width: auto;
   height: 80px;
 }
 .demo-typeuser {
   position: relative;
   display: inline-block;
   margin-left: 0.625rem;
 }
 .demo-typeuser p:nth-child(2) {
   font-size: 0.75rem;
   color: #888888;
   line-height: 25px;
 }
 .demo-typeuserDis {
   display: block;
 }
 .demo-typeuserDis1 {
   display: none;
 }
 /deep/ .el-submenu__title {
	 padding-left: 15px!important;
 }

  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }

  /* 两级反转 */
 .go{
   -webkit-transform: rotate(360deg);
   animation: rotation 1s linear infinite;
   -moz-animation: rotation 1s linear infinite;
   -webkit-animation: rotation 1s linear infinite;
   -o-animation: rotation 1s linear infinite;
   cursor: pointer;
 }

</style>
